<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{late.name}}</block>
		</cu-custom>
		<form>
			<view class="cu-form-group">
				<view class="title">日期选择</view>
				<picker mode="date" :value="date" start="2020-09-01" end="2030-09-01" @change="DateChange">
					<view class="picker">
						{{date}}
					</view>
				</picker>
			</view>
			<radio-group class="block" @change="RadioChange">
				<view class="cu-form-group margin-top">
					<view class="title">早上</view>
					<radio :checked="true" value="0">早读</radio>
					<radio :checked="false" value="1">12节</radio>
					<radio :checked="false" value="2">34节</radio>	
				</view>
				<view class="cu-form-group">
					<view class="title">下午</view>
					<radio :checked="false" value="3">56节</radio>
					<radio :checked="false" value="4">78节</radio>
					<radio :checked="false" value="5">晚修</radio>
				</view>
				<view class="cu-form-group">					
					<view class="title">4节连堂</view>
					<radio :checked="false" value="6">1~4节</radio>
					<radio :checked="false" value="7">5~8节</radio>	
				</view>
			</radio-group>
			<!-- #ifndef MP-ALIPAY -->
			<view class="cu-form-group">
				<view class="title">学生</view>
				<picker mode="multiSelector" @change="MultiChange" @columnchange="MultiColumnChange" :value="multiIndex" :range="multiArray">
					<view class="picker">
						 {{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}} 
					</view>
				</picker>
			</view>
			<!-- #endif -->
			<view class="cu-form-group margin-top">
				<view class="title">请假类型</view>
				<picker @change="PickerChange" :value="index" :range="picker">
					<view class="picker">
						{{index>-1?picker[index]:'迟到'}}
					</view>
				</picker>
			</view>
			<view class="cu-bar bg-white margin-top">
				<view class="action">图片上传</view>
				<view class="action">{{imgList.length}}/{{imgsize}}</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
					 <image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<imgsize">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
		</form>
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-red margin-tb-sm lg" @tap="send()">嫣红</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgsize:1,
				imgList: [],
				radio: '0',
				multiArray: [
					[],[]
				],
				objectArray:[{
					name:'C17402',
					classmates:[{id:1,name:'谢汶禧'},{id:2,name:'吴炅燊'},{id:3,name:'杨远'},	{id:4,name:'叶学朗'},{id:5,name:'钟铸浩'},{id:6,name:'叶昭宏'}]
				},
				{
					name:'C17501',
					classmates:[{id:11,name:'汤浩光'},{id:12,name:'刘裕斌'},{id:13,name:'李嘉琪'},{id:14,name:'曾浩然'},{id:15,name:'李政东'},{id:16,name:'任嘉渤'}]
				},
				{
					name:'C17502',
					classmates:[{id:21,name:'房家乐'},{id:22,name:'周城浩'},{id:23,name:'黎曜萁'},{id:24,name:'袁嘉顺'},{id:25,name:'陈凯烽'},{id:26,name:'曾炳申'}]
				},
				{
					name:'C17601',
					classmates:[{id:31,name:'骆炳钊'},{id:32,name:'周和俊'},{id:33,name:'李逸'},{id:34,name:'曾宇豪'},{id:35,name:'司徒晖豪'},{id:36,name:'谢鹏'}]
				},
				{
					name:'C17602',
					classmates:[{id:41,name:'刘周杰'},{id:42,name:'刘靖杰'},{id:43,name:'张家源'},{id:44,name:'颜佳宏'},{id:45,name:'滕鹏辉'},{id:46,name:'尤冠岱'}]
				},
				{
					name:'C18101',
					classmates:[{id:51,name:'庄盛发'},{id:52,name:'熊礼'},{id:53,name:'谢家豪'},{id:54,name:'史永宁'},{id:55,name:'许鹏博'},{id:56,name:'周亦康'}]
				},
				{
					name:'C18102',
					classmates:[{id:61,name:'邱雄辉'},{id:62,name:'王炳森'},{id:63,name:'侯炳枫'}]
				},
				{
					name:'C18201',
					classmates:[{id:71,name:'陈家贤'},{id:72,name:'赵鸿涛'},{id:73,name:'唐梓方'},{id:74,name:'蔡汶宏'},{id:75,name:'欧宇鸿'},{id:76,name:'詹炳梁'}]
				},
				{
					name:'13421',
					classmates:[{id:81,name:'陆歆斐'}]
				}],
				multiIndex: [0, 0],
				index:0,
				late:{
					name:'考勤'
				},
				date: '2020-11-02',
				picker: ['迟到', '旷课', '病假','事假','公假']				
			};
		},
		onLoad() {
			this.objectArray.forEach(e=> this.multiArray[0].push(e.name));
			this.objectArray[0].classmates.forEach(e=>this.multiArray[1].push(e.name));
		},
		mounted(){
			let now = new Date();
			this.date = now.getFullYear()+'-'+(now.getMonth()+1)+'-'+now.getDate();
		},
		methods: {
			send(){
				uni.uploadFile({
					url:'localhost:8080/attendance',
					filePath:this.imgList[0],
					name:'file',
					fileType:'image',
					formData:{
						date:this.date,
						classId:this.radio,
						stdNo:this.objectArray[this.multiIndex[0]].classmates[this.multiIndex[1]].id,
						attendanceId:this.index
					},
					success:(e) =>{
						console.log(e)
					},
					fail: (e) => {
						console.log(e)
					},
					complete: () => {
						
					}
				})
			},
			ChooseImage() {
				uni.chooseImage({
					count: this.imgsize, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: this.late.name,
					content: '确定要删除'+ this.late.name +'吗？',
					cancelText: '再想想',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			DateChange(e) {
				this.date = e.detail.value
			},
			RadioChange(e) {
				this.radio = e.detail.value
			},
			MultiChange(e) {
				this.multiIndex = e.detail.value
				//console.log(this.objectArray[this.multiIndex[0]].classmates[this.multiIndex[1]].id)
			},
			MultiColumnChange(e) {
				let data = {
					multiArray: this.multiArray,
					multiIndex: this.multiIndex
				};
				data.multiIndex[e.detail.column] = e.detail.value;
				switch (e.detail.column) {
					case 0:
						data.multiArray[1]=[];
						this.objectArray[data.multiIndex[0]].classmates.forEach(e=> data.multiArray[1].push(e.name))
						data.multiIndex[1] = 0;
						break;
				}
				this.multiArray = data.multiArray;
				this.multiIndex = data.multiIndex;
			},
			PickerChange(e) {
				this.index = e.detail.value
			}
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>
